<template>
  <div>
    <el-container>
      <el-header height="60px">
        <div class="header">
          <el-input v-model="input" placeholder="请输入姓名"  class="search"></el-input>
          <div class="datedw">
            <el-date-picker v-model="value2"  type="date"  placeholder="选择日期" :picker-options="pickerOptions1" class="time" width="160"> </el-date-picker>
          </div>
            
             <el-button type="primary" round class="btn" icon="el-icon-search" @click="getlists()">搜索</el-button>
        </div>
           
           
      
      </el-header>
      <el-main>
            <el-table  :data="tableData" border style="width: 100%"  >
            <el-table-column fixed prop="name" align="center" label="姓名"  width="200">
            </el-table-column>

            <el-table-column prop="level" align="center" label="职务" width="200">
            </el-table-column>
            
            <el-table-column  align="center"  label="人员去向"  width="200">
              <template slot-scope="scope">
                <span v-if="scope.row.onwork == 1">
                    在岗 
                </span>
                <span v-if="scope.row.meeting == 1">
                    开会
                </span>

                 <span v-if="scope.row.trip == 1">
                    出差
                </span>

                <span v-if="scope.row.offwork == 1">
                    请假
                </span>
                <span v-if="scope.row.holiday == 1">
                    休假
                </span>
                  
              </template>
            </el-table-column>

            <el-table-column  prop="time" align="center"  label="日期"    width="200">
            </el-table-column>
          </el-table>
            <!-- 分页 -->
               <el-pagination
                  background
                  :page-size="paging.per_page"
                  :pager-count="11"
                  layout="prev, pager, next"
                  :total="paging.total"
                
                  @current-change="handleCurrentChange"
                  >
                </el-pagination>
    </el-main>
    </el-container>
   
  </div>
</template>

<script>
import { lists } from "../../api/api";
import moment from "moment/moment";
export default {
  data() {
    return {
      pagesc: 1,
      tableData: [],
      input: "",
      paging: {},
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      value2: ""
    };
  },
  created() {
    this.getlists();
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    // 获取列表数据 加搜索
    getlists() {
      let value2 = moment(this.value2).format("YYYY-MM-DD");
      if (value2 == "Invalid date") {
        value2 = "";
      }

      lists(this.pagesc, this.input, value2).then(res => { 
        // console.log(res);
        this.tableData = res.data.data;
        this.paging = res.data;
      });
    },
    handleCurrentChange(per_page) {
      this.pagesc = per_page;
      this.getlists(per_page);
    }
  }
};
</script>


<style lang="scss" scoped>
.datedw{
  position: absolute;
  top: 0;
  right: 40px;
  width: 160px;
  overflow: hidden;
}
body {
	margin: 0px;
	padding: 0px;
	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}
.el-header,
.el-footer {
  color: #333;
  overflow: hidden;
  padding-top: 20px;
  width: 660px;
}
.header {
  position: relative;
  width: 520px;
}
.search {
  width: 300px;
  height: 38px;
  border-radius: 50px;
  overflow: hidden;
}

.time {
  width: 160px;
  border-radius: 35px;
  overflow: hidden;
  input {
    border: none;
    outline:none;
  }
}

.btn {
  overflow: hidden;
  display: block;
  margin-bottom: 10px;
  position: absolute;
  top: 0;
  right: -70px;
}

.el-main {
  // background-color: #fff;
  color: #000;
  margin: 0;
  padding: 0;
  margin-top: 30px;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>

